console.log(x);\nx = 5;\nvar x;\nconsole.log(x);This article isn’t about how JS engines work.\nTo understand how hoisting works, let me tell you about the work of the JS engine\nin a simplified way. First, the code is compiled. The compiler finds and binds all\ndeclarations to the corresponding scopes. After that the code is executed
\nThe JS compiler creates variable declarations to the top of their scope for optimization.\nJS perceives var x = 5; as two commands. First - declare x, second - assign x the value 5.\nSo, all variables are declared before any value is assigned to them.\nLet’s go back to the example. Try to rewrite the code from the example as it\nwill look after compilation.
\n
var x;\nconsole.log(x); // undefined\nx = 5;\nconsole.log(x); // 5Functions (function declaration) hoisting completely.
\ntestWithDeclaration() // Hoisted\n\nfunction testWithDeclaration() {\n console.log(\"Hoisted\");\n}\n
function testWithDeclaration() {\n console.log(\"Hoisted\");\n}\n\ntestWithDeclaration() // HoistedBut
\ntestWithExpression(); // TypeError\n\nvar testWithExpression = function() {\n console.log(\"Hoisted\");\n};\n
var testWithExpression; // undefined\n\ntestWithExpression(); // undefined() - TypeError\n\nvar testWithExpression = function() {\n console.log(\"Hoisted\");\n};testWithArrowFunc(); // TypeError\n\nvar testWithArrowFunc = () => console.log(\"Hoisted\");Hoisting is performed at the scope level. So variable declarations hoisting\nin their own scope and don’t hoisting in another one. Let’s look at an example.
\ntest();\n\nfunction test() {\n console.log(x);\n var x = 5;\n}Try to rewrite the code from the example as it will look after compilation.
\n\n
function test() {\n var x; // x hoisted in test function scope\n console.log(x); // undefined\n x = 5;\n}\n\ntest();JS also hoisting variables declared via let and const,\nbut doesn’t initialize them with the undefined value, as it happens when using var
console.log(x); // ReferenceError: Cannot access 'x' before initialization\n\nconst x = 5;